<template>
  <div>
    <!-- 顶栏 -->
    <div class="header">
      <div style="width: 1190px; margin: 0 auto">
        <a href="#" class="hd_nav">亲，请登录</a>
        &nbsp;&nbsp;
        <a href="#" class="hd_nav">免费注册</a>
        <div style="float: right">
          <a href="#" class="hd_nav">我的订单</a>
          <el-divider direction="vertical"></el-divider>
          <a href="#" class="hd_nav">我的就爱</a>
          <el-divider direction="vertical"></el-divider>
          <a href="#" class="hd_nav">就爱卖家中心</a>
          <el-divider direction="vertical"></el-divider>
          <a href="#" class="hd_nav">联系客服</a>
        </div>
      </div>
    </div>

    <div class="container">
      <!-- 头部 -->
      <div class="top">
        <!-- Logo -->
        <a href="/" class="logo">
          <img src="../../assets/logo.png" alt="" />
        </a>
      </div>

      <!-- 主体 -->
      <el-main class="main">
        <!-- 收货地址 -->
        <div class="address_info">
          <div class="order_address">
            <div class="header_wrapper">
              <h3 class="header_title">收货地址</h3>
              <span style="color: #ff5000; font-size: 12px; padding-left: 10px"
                >新增收货地址</span
              >
            </div>
            <div class="address">
              <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item label="所在地区" prop="region">
                  <el-select
                    v-model="ruleForm.region"
                    placeholder="请选择省/市/区/街道"
                  >
                    <el-option label="上海" value="shanghai"></el-option>
                    <el-option label="北京" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                  <el-input v-model="ruleForm.adress"></el-input>
                </el-form-item>
                <el-form-item label="收货人姓名" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                  <el-input v-model="ruleForm.phone"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" size="mini" @click="submitForm"
                    >保存</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column
                fixed
                prop="name"
                label="收货人"
                align="center"
                width="150"
              >
              </el-table-column>
              <el-table-column
                prop="region"
                label="所在地区"
                align="center"
                width="218"
              >
              </el-table-column>
              <el-table-column
                prop="address"
                label="详细地址"
                align="center"
                width="350"
              >
              </el-table-column>
              <el-table-column
                prop="phone"
                label="电话/手机"
                align="center"
                width="200"
              >
              </el-table-column>
              <el-table-column label="操作" align="center" width="100">
                <template slot-scope="scope">
                  <el-button
                    @click="handleClick(scope.row)"
                    type="text"
                    size="small"
                    >修改</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    @click="handleDelClick(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-main>
    </div>

    <!-- 底部 -->
    <el-footer>
      <!-- 版权声明、备案信息 -->
      <div class="copyright">
        <span style="margin-left: 50px">
          Copyright 2021 9iMall. All Rights Reserved 就爱商城 版权所有
        </span>
        <span style="margin-left: 50px">
          <a href="https://beian.miit.gov.cn/" target="_blank">
            晋ICP备2020012685号-1</a
          >
          &nbsp;|&nbsp;
          <a
            target="_blank"
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=35080202351228"
            ><img
              class="record_ico"
              src="https://cdn.jsdelivr.net/gh/XueChenda/blog_imgs/img/%E5%A4%87%E6%A1%88%E5%9B%BE%E6%A0%87.png"
            />
            闽公网安备 35080202351228号</a
          >
        </span>
      </div>
    </el-footer>
  </div>
</template>

<script>
export default {
  data () {
    return {
      ruleForm: {
        region: '',
        address: '',
        name: '',
        phone: '',
      },
      tableData: [
        {
          name: '橘子',
          region: '福建省福州市',
          address: '上海市普陀区金沙江路 1518 弄',
          phone: '12345678912',
        },
        {
          name: '西瓜',
          region: '福建省龙岩市',
          address: '上海市普陀区金沙江路 1518 弄',
          phone: '12345678913',
        },
        {
          name: '苹果',
          region: '福建省泉州市',
          address: '上海市普陀区金沙江路 1518 弄',
          phone: '12345678914',
        },
        {
          name: '草莓',
          region: '福建省三明市',
          address: '上海市普陀区金沙江路 1518 弄',
          phone: '12345678915',
        }
      ],
      rules: {
        region: [
          { required: true, message: '请选择区域', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请输入详细收获地址', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          { max: 11, message: '长度在11个字符', trigger: 'blur' }
        ],
      }
    };
  },
  methods: {
    //删除地址
    handleDelClick (index, row) {
      this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableData.splice(index, 1)
        this.$message({ showClose: true, message: "删除成功", type: 'success' });
      })
    },
    handleClose (done) {
      done();
    },
    handleClick (row) {
      this.ruleForm = row
    },
    submitForm () {
      this.$message({ showClose: true, message: "修改成功", type: 'success' });
    },
  }
}
</script>

<style scoped>
/* 顶栏 */
.header {
  height: 35px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
}

.hd_nav:hover {
  color: #ff5000;
}

/* 容器 */
.container {
  width: 1060px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 头部 */
.top {
  padding-top: 24px;
  height: 98px;
}

/* Logo */
.logo {
  float: left;
  margin: 8px 20px 0 20px;
}

/* 主体 */
.main {
  min-height: calc(100vh - 95px);
  overflow: hidden;
  /* padding: 0; */
  border-radius: 18px;
  background-color: #fff;
}

.header_title {
  font-size: 14px;
  color: #014d7f;
  background-color: #f3f8fe;
  height: 30px;
  line-height: 30px;
  margin-bottom: 20px;
  font-weight: normal;
  padding-left: 10px;
}

.address {
  margin: 20px 10px 0;
}

/* 底部 */
.el-footer {
  text-align: center;
  line-height: 60px;
  margin: 35px auto;
  background-color: white;
}

/* 版权声明、备案信息 */
.copyright {
  color: #58666e;
  margin-left: 0;
}

/* 备案图标 */
.record_ico {
  vertical-align: middle;
}
</style>
